<template>
	<div class="container">
		<div class="content-2">
			<div class="tui-product-list">
				<div class="tui-product-container" v-for="(option,Ind) in 2" :key="option">
					<block v-for="(item, index) in list" :key="index" v-if="index % 2 == Ind">
						<div class="tui-pro-item" hover-class="hover" :hover-start-time="150" @click="toProduct(item)"
							@longpress="longpressHanld(item.id,index)">
							<!-- 视频 -->
							<image class="video"
								v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge' && item.firstCoverPath"
								src="/static/icon/icon_bofang.png" mode=""></image>
							<image
								v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge' "
								:style="item.firstCoverPath?'':'height:0'" :src="item.firstCoverPath"
								class="tui-pro-img video-tui" mode="aspectFill" />
							<image v-else :src="item.firstPicturePath" class="tui-pro-img" mode="widthFix" />
							<div class="tui-pro-content">
								<div class="pri-row">
									<span class="price" v-if="item.price">
										<span class="price-icon">￥</span>
										{{item.price}}
									</span>
									<span v-if="item.freeShipping" class="attr">包邮</span>
								</div>
								<div class="tui-pro-tit">{{ item.title }}</div>
								<div v-if="!edit" class="user-info" @click.stop="$navSkin.toPersonel(item.userId)">
									<image :src="item.avatar" mode="aspectFill"></image>
									<span>{{item.nickname}}</span>
								</div>
								<div v-if="!edit" class="create-time">
									<div class="time">
										{{ item.createTime? $utils.timestampFormat(Date.parse( item.createTime)/1000) : ''}}
									</div>
									<div class="like" @click.stop="changeFavoriteInformation(item,item.id)">
										<image v-if="!item.favorite" src="/static/icons/like_off.png" mode="aspectFit">
										</image>
										<image v-else src="/static/icons/like_on.png" mode="aspectFit"></image>
										<span>{{item.favoriteCount}}</span>
									</div>
								</div>
							</div>
						</div>
					</block>
				</div>
			</div>
			<uni-load-more v-if="loading" :status="'loading'"
				:content-text="{contentnomore:'加载失败，请点击重试'}"></uni-load-more>
			<div class="empty-box" v-if="list.length<1">
				<image class="empty-box-img" src="/static/icon/icon_wu.png" mode=""></image>
				<div class="title">暂无内容</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loading: false
			};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			edit: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			list(val) {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 500)
			}
		},
		methods: {
			// 点赞
			changeFavoriteInformation(item, id) {
				let url = !item.favorite ? 'wechat/favoriteInformation' : 'wechat/cancelFavoriteInformation'
				let that = this
				that.$httpRequest.request({
					that: that,
					url,
					method: 'post',
					params: {
						informationId: id
					},
					success: res => {
						if (res.code === that.$httpConfig.SUCCESS_CODE) {
							if (item.favorite) {
								item.favoriteCount--
							} else {
								item.favoriteCount++
							}

							item.favorite = !item.favorite

						} else {
							that.$toast.msg(res.message, {
								icon: 1
							})
						}
					}
				}, false)
			},
			longpressHanld(id, index) {
				this.$emit('longClick', id, index)
			},
			toProduct(item) {
				if (this.edit) {
					uni.navigateTo({
						url: '/pages/my/send?id=' + item.id
					})
				} else {
					this.$navSkin.toProduct(item.id)
				}

			}
		},
		onLoad(e) {

		},
		onShow() {

		},
		onHide() {
			console.log('on hide')
		},
		onUnload() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {}
	};
</script>
<style scoped lang="scss">
	@import '@/style/def.scss';

	.content-2 {

		//shangping
		.tui-product-list {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 10rpx 20rpx 0;

			/* padding-top: 20rpx; */
			.tui-product-container {
				flex: 1;
				margin-right: 2%;
			}

			.tui-product-container:last-child {
				margin-right: 0;
			}

			.tui-pro-item {
				width: 100%;
				margin-bottom: 4%;
				background: #fff;
				box-sizing: border-box;
				// border-radius: 12rpx;
				overflow: hidden;
				position: relative;
			}

			.video {
				width: 34rpx;
				height: 34rpx;
				// background: rgba(7, 7, 7, 0.2);
				border-radius: 50%;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				z-index: 1;
			}

			.tui-pro-img {
				display: block;
				width: 345rpx;
			}

			.tui-pro-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				width: 345rpx;
				padding: 10rpx;
				background: #FFFFFF;
			}

			.tui-pro-tit {
				color: #000000;
				font-size: 32rpx;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.user-info {
				width: 100%;
				display: flex;
				align-items: center;
				margin: 15rpx 0;

				image {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
				}

				span {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					padding-left: 10rpx;
					max-width: 250rpx;
					@extend .nowrap;
				}
			}

			.create-time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.time {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 1;
				}

				.like {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 22rpx;
					}

					span {
						font-size: 20rpx;
						font-weight: 400;
						color: #1C1C1C;
						line-height: 1;
						padding-left: 10rpx;
					}
				}
			}
		}
	}

	.pri-row {
		margin-bottom: 13rpx;

		.price {
			font-size: 42rpx;
			font-weight: normal;
			line-height: normal;
			text-align: center;
			color: #EC6A0A;

			.price-icon {
				font-weight: 400;
				font-size: 28rpx;
			}
		}

		.attr {
			font-size: 28rpx;
			font-weight: normal;
			line-height: 32rpx;
			text-align: center;
			color: #666666;
			margin-left: 7rpx;
		}
	}

	.empty-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		width: 100%;
		margin-top: 100rpx;

		.empty-box-img {
			width: 200rpx;
			height: 180rpx;
		}

		.title {
			font-size: 28rpx;
			font-weight: 400;
			color: #1C1C1C;
			line-height: 40rpx;
			margin-top: 60rpx;
		}
	}
</style>